<template>
  <view :data-theme="globPrimary">
    <u-navbar title="直播课表" :custom-back="onBack"></u-navbar>
    <mescroll-body
      ref="mescrollRef"
      :height="mescrollHeight"
      :up="upOption"
      @init="mescrollInit"
      @down="downCallback"
      @up="getDailyData"
    >
      <view class="calendar-header">
        <calendar @change="handleTimeChange"></calendar>
      </view>
      <view class="calendar-body">
        <view class="u-flex calendar-body__header">
          <view class="num"
            >共<text>{{ dailyList.length }}</text
            >节课</view
          >
          <view class="date">
            {{ date | timeFormat }}
          </view>
        </view>

        <view
          v-for="(item, index) in dailyList"
          :key="index"
          class="calendar-body__item"
          :class="[{ 'live-end': item.live_status == 992 }]"
        >
          <view class="top u-flex">
            <u-image
              :width="32"
              :height="32"
              src="@/pageUser/static/images/livecourse_icon.png"
            ></u-image>
            <view class="time"
              >{{ item.start_time | timeFormat('hh:MM') }} -
              {{ item.end_time | timeFormat('hh:MM') }}</view
            >
            <view class="status" v-if="item.live_status == 992">{{ item.status_text }}</view>
            <template v-else-if="item.live_status == 999">
              <view class="playing">
                <view class="playing__bar playing__bar1"></view>
                <view class="playing__bar playing__bar2"></view>
                <view class="playing__bar playing__bar3"></view>
                <view class="playing__bar playing__bar4"></view>
              </view>
              <div class="start">{{ item.status_text }}</div>
            </template>
          </view>
          <view class="ctitle u-line-1">{{ item.course_title }}</view>
          <view class="stitle u-line-1">{{ item.sec_title }}</view>
        </view>
      </view>
    </mescroll-body>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'
import calendar from './components/calendar.vue'
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js'
export default {
  mixins: [MescrollMixin],
  components: {
    calendar,
  },
  data() {
    return {
      value: new Date(),
      dailyList: [],
      upOption: {
        isLock: true,
        empty: {
          tip: '今日无课~',
        },
      },
    }
  },
  computed: {
    ...mapGetters({
      globPrimary: 'designSetting/getGlobTheme',
      globPrimaryColor: 'designSetting/getGlobThemeColor',
      globWindowWidth: 'projectSetting/globWindowWidth',
      navbarHeight: 'projectSetting/globNavbarHeight',
      statusBarHeight: 'projectSetting/globStatusBarHeight',
      userInfo: 'user/getUserInfo',
      token: 'user/getToken',
    }),
    date() {
      return this.toDate(this.value)
    },
    mescrollHeight() {
      let windowHeight = this.$u.sys().windowHeight
      let height = windowHeight - this.navbarHeight - this.statusBarHeight
      return `${height}px`
    },
  },
  options: { styleIsolation: 'shared' },
  // 监听页面返回
  onBackPress(options) {
    if (options.from === 'navigateBack') {
      return false
    }
    this.onBack()
    return true
  },
  methods: {
    toDate(val) {
      if (!val) {
        throw new Error('invalid val')
      }
      return val instanceof Date ? val : new Date(val)
    },
    getDailyData() {
      this.$edu.api
        .getUserCourseScheduleDaily({
          date: this.$u.timeFormat(this.date),
          identity: 'teacher',
        })
        .then((res) => {
          const { data } = res
          this.dailyList = data
          this.mescroll.endSuccess(data.length, false)
        })
    },
    handleTimeChange(e) {
      this.value = e.fulldate
      this.getDailyData()
    },
    // 返回上一页
    onBack() {
      let pages = getCurrentPages()
      let page = pages[pages.length - 2]
      if (this.$u.test.empty(page)) {
        this.$u.route({ type: 'switchTab', url: 'pages/user/index' })
      } else {
        this.$u.route({ type: 'back' })
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.calendar-header {
  background-color: #fff;
}
::v-deep .mescroll-empty {
  background-color: #fff;
}
.calendar-body {
  margin-top: 28rpx;
  padding: 0 30rpx;
  .calendar-body__header {
    margin-bottom: 28rpx;
    .num {
      font-size: 26rpx;
      font-weight: 400;
      color: $edu-tips-color;
      text {
        color: $edu-main-color;
      }
    }
    .date {
      margin-left: auto;
      font-size: 24rpx;
      font-weight: 400;
      color: $edu-tips-color;
    }
  }
  .calendar-body__item {
    background: #ffffff;
    border-radius: 16rpx;
    margin-bottom: 24rpx;
    padding: 26rpx 30rpx;
    .time {
      margin-left: 16rpx;
      font-size: 34rpx;
      font-weight: bold;
      color: $edu-main-color;
    }
    .status {
      margin-left: auto;
      font-size: 24rpx;
      font-weight: 400;
      color: #b7bac1;
    }
    .ctitle {
      margin-top: 26rpx;
      font-size: 28rpx;
      font-weight: 600;
      color: $edu-main-color;
    }
    .stitle {
      margin-top: 14rpx;
      font-size: 24rpx;
      font-weight: 400;
      color: $edu-tips-color;
    }
    .name {
      margin-top: 26rpx;
      font-size: 24rpx;
      font-weight: 400;
      color: $edu-tips-color;
    }
    .start {
      margin-left: 10rpx;
      font-size: 24rpx;
      font-weight: 400;
      @include text_color();
    }
    .playing {
      margin-left: auto;
      width: 32rpx;
      height: 34rpx;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      .playing__bar {
        width: 4rpx;
        height: 100%;
        border-radius: 3rpx;
        @include bg-color();
        animation: up-and-down 1.3s ease infinite alternate;
      }
      .playing__bar1 {
        height: 60%;
      }
      .playing__bar2 {
        height: 30%;
        animation-delay: -2.4s;
      }
      .playing__bar3 {
        height: 75%;
        animation-delay: -3.7s;
      }
      .playing__bar4 {
        height: 45%;
        animation-delay: -4.8s;
      }
      .play_text {
        font-size: 22rpx;
        @include text_color();
      }
    }
    &.live-end {
      .time,
      .ctitle {
        color: $edu-tips-color;
      }
    }
  }
}
@keyframes up-and-down {
  10% {
    height: 30%;
  }
  30% {
    height: 100%;
  }
  60% {
    height: 50%;
  }
  80% {
    height: 75%;
  }
  100% {
    height: 20%;
  }
}
</style>
